<template>
      <div class="com-container ">
        <div class="com-chart stock" ref='stock_ref'></div>
        </div>
</template>

<script>
import { mapState } from 'vuex'


export default {
    name:'maps',
      data() {
        return {
            chartsInstance:null,
            allData:null,
            currentIndex:0,
              // 圆环坐标
            centerArr: [
                ['18%', '40%'],
                ['50%', '40%'],
                ['82%', '40%'],
                ['34%', '75%'],
                ['66%', '75%'],
            ],
            // 圆环渐变色
            colorArr: [
                ['#4FF778', '#0BA82C'],
                ['#E5DD45', '#E8B11C'],
                ['#E8821C', '#E55445'],
                ['#5052EE', '#AB6EE5'],
                ['#23E5E5', '#2E72BF'],
            ],
            test:[
            {
                name:'京东',
                value:2000,
                label:{
                    color:'yellow'
                },
                emphasis:{
                    itemStyle:{ // 高亮样式
                        color:'#fff'
                    }
                }
            },
            {name:'淘宝',value:3000},
            {name:'拼多多',vallue:4500},
            {name:'唯品会',value:3200}
        ],
        timerId:null
        }
    },
    created() {
         this.$socket.registerCallBack('stockData', this.getData) 
    },
    mounted() {
        this.initCharts()
        // this.getData()
         // 向服务器请求数据
        this.$socket.send({
            action:'getData',
            socketType:'stockData',
            chartName:'stock',
            value:''
        })
        window.addEventListener('resize',this.screenAdapter)
    },
    beforeDestroy() {
        window.removeEventListener('resize',this.screenAdapter)
        clearInterval(this.timerId)
        this.$socket.unregisterCallBack('stockData') 
    },
    computed:{
    ...mapState('theme')
    },
    methods: {
        initCharts(){
            this.chartsInstance = this.$echarts.init(this.$refs.stock_ref,'chalk')
            const initOpt={
                title:{
                    text:'商品库存',
                    left:20,
                    top:20
                }
            }
            this.chartsInstance.setOption(initOpt)
            this.chartsInstance.on('mouseover',()=>{
                clearInterval(this.timerId)
            })
            this.chartsInstance.on('mouseout',this.startInterVal)
        },
       async getData(res){
            // const {data:res} = await this.$http.get('stock')
           this.allData = res
            // 更新
            this.updateCharts()
            this.startInterVal()
        },
        updateCharts(){
            this.screenAdapter() // 屏幕适配
            const start = this.currentIndex*5
            const end = (this.currentIndex+1)*5
            const showData = this.allData.slice(start,end)
            const pieArr = showData.map((v,i)=>{
                return {
                    type:'pie',
                    center:this.centerArr[i],
                    hoverAnimation:false,
                    textLine:{
                        show:false
                    },
                    label:{
                        show:true,
                        position:'center',
                        color:this.colorArr[i][0]
                    },
                    data:[
                        {
                            name:v.name+'\n'+v.stock,
                            value:v.sales,
                            itemStyle:{
                                color:{
                                    type:'linear',
                                    x:0,
                                    y:1,
                                    x2:0,
                                    y2:0,
                                    colorStops:[
                                        { offset:0,color:this.colorArr[i][0] },
                                        { offset:1,color:this.colorArr[i][1] }
                                    ]
                                }
                            }
                        },
                        {
                            value:v.stock,
                            itemStyle:{
                                color:'#333843'
                            }
                        }
                    ]
                }
            })         
            const dataOpt={
                series:pieArr
            }
            this.chartsInstance.setOption(dataOpt)
        },
        screenAdapter(){
             const titleFontSize = this.$refs.stock_ref.offsetWidth / 100 * 3 // 标题文字大小
             const innerRadius = titleFontSize*2.8
             const outterRadius = innerRadius*1.125
            // 屏幕适配
            const adapterOpt={
                title:{
                    textStyle:{
                        fontSize:titleFontSize
                    }
                },
                series:[
                    {
                        radius:[innerRadius,outterRadius],
                        label:{
                            fontSize:titleFontSize/2
                        }
                    },
                     {
                        radius:[innerRadius,outterRadius],
                        label:{
                            fontSize:titleFontSize/2
                        }
                    },
                     {
                        radius:[innerRadius,outterRadius],
                        label:{
                            fontSize:titleFontSize/2
                        }
                    },
                     {
                        radius:[innerRadius,outterRadius],
                        label:{
                            fontSize:titleFontSize/2
                        }
                    },
                     {
                        radius:[innerRadius,outterRadius],
                        label:{
                            fontSize:titleFontSize/2
                        }
                    }
                ]
            }
            this.chartsInstance.setOption(adapterOpt)
            this.chartsInstance.resize()
        }, 
        startInterVal(){
            if(this.timerId){
                clearInterval(this.timerId)
            }
            this.timerId = setInterval(()=>{
                    this.currentIndex++
                    if(this.currentIndex>1){
                        this.currentIndex=0
                    }
                    this.updateCharts()
            },2000)
        }     
    
    },
    watch:{
        theme(){
            console.log('主题切换了');
            this.chartInstance.dispose() // 销毁图表对象
            this.initCharts() // 初始化图表对象
            this.screenAdapter() // 屏幕适配
            this.updateCharts() // 跟新图表
        }
    }
}
</script>

<style lang="less" scoped>

</style>